<template>
	<container
		class="catr"
		:isNoData="isNoData"
		:has-login="hasLogin"
		:login-view-option="{
			icon: '/static/logo.png',
			iconW: '150rpx',
			iconH: '150rpx',
			iconBottom: '40rpx',
			name: '金品教育网上书城'
		}"
		@btnClick="nodataBtnClick"
		:nodata-option="{
			type: 'hasbtn',
			icon: '/static/catr-nodata.png',
			iconW: 600,
			iconH: 540,
			iconBottom: '80rpx',
			text: '您购物车空空如也',
			btnText: '去添加吧'
		}"
	>
		<view class="tools-head">
			<text class="total">共{{ catrGoodNum }}件商品</text>
			<button v-if="!isEdit" class="btn btn-text edit" @click="isEdit = true">编辑</button>
			<button v-else class="btn btn-yellow edit" @click="isEdit = false">完成</button>
		</view>
		<view class="good-list" :style="{'margin-bottom':unShelveGoods.length>0?'30rpx':'90rpx'}">
			<evan-checkbox-group v-model="checkGoods" ref="checkgroup" @change="checkChange">
				<view class="item" :key="item.id" v-for="(item, index) in goodList">
					<evan-checkbox class="check" v-model="item.check" :label="item.id" :icon-size="40" :primary-color="'#E5C545'"></evan-checkbox>
					<goods-item
						class="good"
						type="cross"
						:name-size="28"
						:name-row-num="2"
						:num-min="1"
						:img="imgHost + item.commodityPic"
						:img-width="'124rpx'"
						:img-height="'162rpx'"
						:price="item.sellPrice"
						:orgprice="item.marketPrice"
						:name="item.commodityName"
						:good-num.sync="item.count"
						:is-edit-num="true"
						@change="val => numChange(val, item, index)"
					></goods-item>
				</view>
			</evan-checkbox-group>
		</view>

		<view class="unshelve-goods" v-if="unShelveGoods.length > 0" :style="{'margin-top':goodList.length>0?'30rpx':'76rpx'}">
			<view class="title">
				<view class="total">失效宝贝{{ unShelveGoods.length }}种</view>
				<view class="clear" @click="clearUnshelveGoods">清空失效宝贝</view>
			</view>
			<view class="item" :key="item.id" v-for="(item, index) in unShelveGoods">
				<goods-item
					class="good"
					type="cross"
					:name-size="28"
					:name-row-num="2"
					:num-min="1"
					:img="imgHost + item.commodityPic"
					:img-width="'124rpx'"
					:img-height="'162rpx'"
					:price="item.sellPrice"
					:orgprice="item.marketPrice"
					:name="item.commodityName"
					:good-num.sync="item.count"
					:is-edit-num="false"
				></goods-item>
			</view>
		</view>
		<view class="tools-foots">
			<view class="nomal-type" v-if="!isEdit">
				<text class="check-num">已选{{ checkNum }}件</text>
				<view class="buy">
					<view class="total-money">
						共计 :
						<text class="money">¥{{ totalMoney }}</text>
					</view>
					<button class="btn btn-orange close" @click="goToPlaceOrder">结算</button>
				</view>
			</view>
			<view class="remove-type" v-if="isEdit">
				<view class="all-check">
					<evan-checkbox class="check" @change="checkAll" v-model="allCheck" :label="'all'" :icon-size="40" :primary-color="'#E5C545'"></evan-checkbox>
					全选
				</view>
				<button class="btn btn-orange-line remove-btn" @click="remove">删除</button>
			</view>
		</view>
	</container>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
// import jiuaiCheckbox from '@/components/jiuai-checkbox/jiuai-checkbox.vue';
import evanCheckboxGroup from '@/components/evan-checkbox-group/evan-checkbox-group.vue';
import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue';
import container from '@/components/container/container.vue';
export default {
	components: {
		goodsItem,
		// jiuaiCheckbox,
		evanCheckboxGroup,
		evanCheckbox,
		container
	},
	data() {
		return {
			imgHost: this.$imgHost,
			isEdit: false, //是否在编辑模式
			// totalMoney: 0, //共多少钱
			goodList: [...this.$store.state.catrModule.goodList],
			unShelveGoods: [...this.$store.state.catrModule.unShelveGoods], //下架商品
			// [
			// 	{
			// check:false
			// author: "十万个为什么 上册"
			// count:1
			// categoryId: 19
			// commodityCode: "100100100"
			// commodityId: 8
			// commodityName: "十万个为什么 上册"
			// commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
			// commodityRotationPic: "/profile/upload/eb0964ac-bb95-4439-8555-be233b96e3d6.jpg,/profile/upload/8600a944-2745-484f-82e8-5f99d2f98c62.jpg"
			// createBy: ""
			// createTime: "2021-01-08 07:23:40"
			// freeMailStatus: 0
			// marketPrice: 100
			// orderNum: 0
			// params: {}
			// postage: null
			// press: "十万个为什么 上册"
			// pressDate: "2021-01-12"
			// remark: ""
			// searchValue: null
			// sellPrice: 100
			// status: 1
			// stock: 100
			// updateBy: ""
			// updateTime: null
			// 	}
			// ],
			allCheck: false, //全选
			checkNum: 0, //选中数量
			checkGoods: [
				// 选中商品
			]
		};
	},
	computed: {
		hasLogin() {
			return !(
				this.$store.state.loginModule.token &&
				this.$store.state.loginModule.token != '' &&
				this.$store.state.loginModule.phone &&
				this.$store.state.loginModule.phone != ''
			);
		},
		isNoData() {
			// 无数据
			return this.goodList.length < 1 && this.unShelveGoods.length < 1;
		},

		catrGoodNum() {
			// 购物车商品数量
			let result = 0;
			this.goodList.forEach(item => {
				result = result + item.count;
			});
			return result;
		},
		totalMoney() {
			// 总计金额
			let result = 0;
			this.checkGoods.forEach(id => {
				console.log('checkGoods', id);
				let item = this.$Lodash.find(this.goodList, {
					id: id
				});
				item.buyCount = item.count;

				result = parseFloat(new this.$BigNumber(result).plus(new this.$BigNumber(item.sellPrice).multipliedBy(item.count)));
			});
			return result;
		}
	},
	watch: {
		'$store.state.catrModule.goodList': function(newVal, oldVal) {
			console.log('goodList改变', newVal);
			this.goodList = [...newVal];
		},
		'$store.state.catrModule.unShelveGoods': function(newVal, oldVal) {
			console.log('unShelveGoods改变', newVal);
			this.unShelveGoods = [...newVal];
		}
	},
	methods: {
		nodataBtnClick() {
			uni.switchTab({
				url: '/pages/main/home'
			});
		},
		checkAll(val) {
			// 全选
			console.log('全选', this.$refs);
			if (val) {
				this.goodList.forEach(item => {
					item.check = true;
					this.checkGoods.push(item.id);
				});
			} else {
				this.goodList.forEach(item => {
					item.check = false;
				});
				this.checkGoods = [];
			}
			this.getCheckNum();
		},
		isCheckALl() {
			var isAll = true;
			console.log('goodList', this.goodList);
			this.goodList.forEach(item => {
				console.log('good', item);
				if (item.check == false) isAll = false;
			});
			this.allCheck = isAll;
		},
		getCheckNum() {
			// 获取选中数量
			// this.checkNum = data.length;
			let result = 0;
			this.goodList.forEach(item => {
				console.log('good', item);
				if (item.check == true) result = result + item.count;
			});
			this.checkNum = result;
		},
		checkChange(even) {
			// 选中发生更改
			console.log('选中发生更改', even);
			this.isCheckALl();
			this.getCheckNum();
		},
		numChange(val, good, index) {
			console.log('val', val);
			this.$store.dispatch('editCatr', {
				index: index,
				goodInfo: { ...good, count: parseInt(val) },
				val: val
			});
			this.getCheckNum();
		},
		goToPlaceOrder() {
			// 去下单
			if (this.checkGoods.length > 0) {
				let goodList = [];
				goodList = this.checkGoods.map(id => {
					return this.$Lodash.find(this.goodList, {
						id: id
					});
				});
				this.$store.commit('setBuyGoods', goodList);
				uni.navigateTo({
					url: '/pages/order/order-place?type=catr'
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: '请选中商品！',
					duration: 2000
				});
			}
		},
		remove() {
			// 删除商品
			this.$store.dispatch('removeCatr', { ids: this.checkGoods.toString() }).then(res => {
				this.goodList = this.goodList.filter(item => {
					if (this.checkGoods.indexOf(item.id) == -1) return item;
					console.log('删除商品');
				});
				this.checkGoods = [];
				this.$store.commit('setGoodList', this.goodList);
				if (this.goodList.length < 1) {
					this.isEdit = false;
				}
				this.allCheck = false;
			});
		},
		clearUnshelveGoods() {
			// 清除失效商品
			this.$store
				.dispatch('removeCatr', {
					ids: this.unShelveGoods
						.map(item => {
							return item.id;
						})
						.toString()
				})
				.then(res => {
					this.unShelveGoods = [];
					this.$store.commit('clearUnShelveGoods');
				});
		}
	},
	onShow() {
		this.isEdit = false;
		this.checkGoods = [];
		// this.goodList=[...this.$store.state.catrModule.goodList]
		if (!this.hasLogin) this.$store.dispatch('getCatrList');
	},
	onLoad() {
		console.log('goodList', this.goodList);
	}
};
</script>

<style lang="scss" scoped>
.catr {
	.tools-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx 10rpx 40rpx;
		position: fixed;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 0px 8rpx #333;
		box-sizing: border-box;
		top: 0;
		.total {
			color: #a5a7b3;
			font-size: 28rpx;
		}
		.edit {
			color: #2c2c34;
			font-size: 28rpx;
		}
	}
	.good-list {
		margin-bottom: 90rpx;
		margin-top: 76rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 40rpx;
			border-bottom: 4rpx solid #f3f5fb;
			background-color: #fff;
			::v-deep .evan-checkbox-group {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
			}
			.check {
				margin-right: 40rpx;
			}
			.good {
				width: 100%;
			}
		}
	}
	.unshelve-goods {
		margin-bottom: 90rpx;
		margin-top: 76rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: fff;
			padding: 30rpx 40rpx;
			border-bottom: 4rpx dashed #f3f5fb;
			background-color: #fff;
			.total {
				font-size: 28rpx;
				color: #333;
			}
			.clear {
				color: #ff6106;
				font-size: 28rpx;
			}
		}
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 40rpx;
			border-bottom: 4rpx solid #f3f5fb;
			background-color: #fff;
			::v-deep .evan-checkbox-group {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
			}
			.check {
				margin-right: 40rpx;
			}
			.good {
				width: 100%;
			}
		}
	}
	.tools-foots {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		background-color: #fff;
		position: fixed;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		/* #ifdef MP */
		bottom: 0;
		/* #endif */
		box-sizing: border-box;
		padding: 14rpx 24rpx 14rpx 36rpx;
		box-shadow: 0px 0px 8rpx #333;
		z-index: 100;
		.nomal-type {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.check-num {
				font-size: 28rpx;
			}
			.buy {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.total-money {
					margin-right: 20rpx;
					font-size: 28rpx;
					.money {
						color: #ff6106;
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: bolder;
					}
				}
				.close {
					padding: 14rpx 80rpx;
					font-size: 30rpx;
					font-weight: bolder;
				}
			}
		}
		.remove-type {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.all-check {
				display: flex;
				// align-items: center;
				font-size: 28rpx;
				.check {
					margin-right: 15rpx;
				}
			}
			.remove-btn {
				font-size: 30rpx;
				padding: 14rpx 88rpx;
				font-weight: bolder;
			}
		}
	}
}
</style>
